<div class="d-flex h-100 adressbookComponent" id="adressbookModalTabContent">
    <div class="register">
        <div class="flex-grow-1 d-flex flex-column mb-3 capital-Letter">
            {% set name = null %}
            {% for u in app.user.addressbook|sort((a, b) => a|nameOfUserNoSymbol|lower <=> b|nameOfUserNoSymbol|lower) %}
                {% if u|nameOfUserNoSymbol|first|upper != name %}
                    <div class="registerElement">
                        <a class="adressbookSearchletter" href="#"
                           data-target="#adressbook_{{ u|nameOfUserNoSymbol|first|upper }}">{{ u|nameOfUserNoSymbol|first|upper }}</a>
                    </div>
                    {% set name = u|nameOfUserNoSymbol|first|upper %}
                {% endif %}
            {% endfor %}
        </div>
    </div>
    <div class="textarea">
        <div class="topbar">
            <div class="form-grou mt-2 mb-2">
                <input type="text" placeholder="{{ 'Suche'|trans }}" class="form-control searchListInput">
            </div>
            <div class="filterbar d-flex justify-content-end mt-4">

            <div class="dropdown me-2">
                <a href="#"
                        type="button"
                        id="dropdownMenuButton"
                        data-mdb-toggle="dropdown"
                        aria-expanded="false"
                >
                   {{ 'Filter'|trans }}
                    <i class="fas fa-filter"><div class="filter-dot d-none">0</div></i>

                </a>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    {% if getApplicationProperties('LAF_ADDRESSBOOK_CHECKBOX_LABEL_2_VALUE')|length > 0 %}

                            {% for key,filter in  getApplicationProperties('LAF_ADDRESSBOOK_CHECKBOX_LABEL_2_VALUE') %}
                                <li class="adressBookFilterLine">
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check">
                                        <input class="form-check-input adressBookFilter" type="checkbox" checked="checked"
                                                                               data-filter="{{ filter|json_encode() }}" id="addressbookFilter{{ loop.index }}"/>
                                        <label class="form-check-label" for="addressbookFilter{{ loop.index }}">{{ key }}</label>
                                        </div>
                                    </a>
                                    </li>
                            {% endfor %}
                    {% endif %}
                    <li class="adressBookFilterLine">
                        <a class="dropdown-item" href="#">
                            <div class="form-check">
                                <input class="form-check-input adressBookFilter" data-filter='["online","away","inMeeting"]' type="checkbox" value="" id="addressbookFilterOnline" checked />
                                <label class="form-check-label" for="addressbookFilterOnline">{{ 'status.online'|trans }}</label>
                            </div>
                        </a>
                    </li>
                    <li class="adressBookFilterLine">
                        <a class="dropdown-item" href="#">
                            <div class="form-check">
                                <input class="form-check-input adressBookFilter" data-filter='["favorite"]' type="checkbox" value="" id="addressbookFilterFavorit" checked />
                                <label class="form-check-label" for="addressbookFilterFavorit">{{ 'favorite.sidebar.title'|trans }}</label>
                            </div>
                        </a>
                    </li>

                </ul>
            </div>

{#                <div class="dropdown">#}
{#                    <a href="#"#}
{#                       type="button"#}
{#                       id="dropdownMenuButton"#}
{#                       data-mdb-toggle="dropdown"#}
{#                       aria-expanded="false"#}
{#                    >#}
{#                        {{ 'Sortieren'|trans }} <i class="fa-solid fa-arrow-down-wide-short"></i>#}
{#                    </a>#}
{#                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">#}

{#                        <li><a class="dropdown-item" href="#">{{ 'Alphabetisch'|trans }}</a></li>#}
{#                        <li><a class="dropdown-item" href="#">{{ 'Zuletzt Kontaktiert'|trans }}</a></li>#}
{#                        <li><a class="dropdown-item" href="#">{{ 'Häufig kontaktiert'|trans }}</a></li>#}
{#                    </ul>#}
{#                </div>#}
            </div>


        </div>
        <div class="content">
            <ul class="list-group">
                <li class="list-group-item capital-Letter"><b><i
                                class="fa fa-star"></i> {{ 'favorite.sidebar.title'|trans }}</b>
                </li>
                {% if app.user.adressbookFavorites|length == 0 %}
                    <li class="list-group-item adressbookline"> {{ 'addressbook.favorite.help'|trans|raw }}
                    </li>
                {% else %}
                    {% for u in app.user.adressbookFavorites %}
                        {% include('addressbook/__addressBookEntry.html.twig') with {'u':u} %}
                    {% endfor %}
                {% endif %}
                <li class="mb-3"></li>
                {% set name = null %}
                {% for u in app.user.addressbook|sort((a, b) => a|nameOfUserNoSymbol|lower <=> b|nameOfUserNoSymbol|lower) %}
                    {% if u|nameOfUserNoSymbol|first|upper != name %}
                        <li class="list-group-item capital-Letter"
                            id="adressbook_{{ u|nameOfUserNoSymbol|first|upper }}">{{ u|nameOfUserNoSymbol|first|upper }}
                        </li>
                        {% set name = u|nameOfUserNoSymbol|first|upper %}
                    {% endif %}
                    {% include('addressbook/__addressBookEntry.html.twig') with {'u':u} %}
                {% endfor %}
            </ul>
        </div>


    </div>
</div>
